<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">

       div {

border: 1px red solid;


/*--------------字体设置----------------*/
		/*文字加粗，*/
		font-weight: bolder;

		/*文字倾斜 */
		font-style: italic;

		/*字体大小*/
		font-size: 40px;

		/*字体*/
		font-family: "楷体";

   /*行高*/
	 line-height:100px;
	 /*
	 当行高与容器高度一致时, 文字便会居中
	 注意:行高为奇数时,靠上的文字缝隙会比下面少
	 */

   /*颜色*/
   color: blue;



	 /*文本对齐方式*/
   text-align: left;


  /*首行缩进*/
   text-indent: 2em;
  /*em 单位 是根据文字的实际大小去计算的, 1 em = 当前font-size */


 /*文本修饰符*/
 text-decoration: underline;
 text-decoration-color: green;
 /*
 underline:下划线
 line-through:删除线

  */

/*字母/文字 之间的距离*/
 letter-spacing: 10px;


/*词语之间的距离,以空格为分割决定是否词语
注: 空格font-size大概为正常设置字体大小的一半(不同字体family不一样)
*/
word-spacing: 20px;


/*强制换行*/
white-space: nowrap;
/*normal: 正常换行
  nowrap:强制不换行
*/


/*-----------文字复合样式-------*/
/*语法: 粗细 字体/行高   字体名称
font: 30px/50px "楷体" bolder italic
  */


 }



		</style>



	</head>
	<body>
<div class="">

导读: 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用
“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。

</div>

	</body>
</html>
